<!-- 发送验证码 按钮 -->
<template>
  <div class="send_code_btn">
    <el-button plain class="btn_code" size="small" :disabled="isActiveSendCode" @click="getCode" ref="BtnGetCode">
       <span  v-if="waitingTimes==0 || waitingTimes == older ">
        获取验证码
      </span>
       <span v-else>
        {{ `${waitingTimes}s后重试` }}
      </span>
    </el-button>
  </div>
</template>
<script setup lang='ts' >
import { ref ,watchEffect} from 'vue'
// interface PropsType {
//   isActiveSendCode?: Boolean
//   waitingTimes?: string
// }

const props = defineProps({
  isActiveSendCode: {
    type: Boolean,
    default: () => { return true },
    validator(value: boolean) {
      return [true, false].includes(value)
    }
  },
  waitingTimes: {
    type: Number,
    default: () => { return 20 },
  }
})
 let isActiveSendCode = ref( props.isActiveSendCode)
  let waitingTimes = ref(props.waitingTimes)
const emit = defineEmits(['sendCode'])
let older = props.waitingTimes
watchEffect(()=>{
isActiveSendCode.value =props.isActiveSendCode
 waitingTimes.value =  props.waitingTimes
})


let timer = ref(0)
const getCode = () => {
    isActiveSendCode.value = true
  emit('sendCode')
  clearInterval(timer.value)
  timer.value = setInterval(() => {
    waitingTimes.value--
    if (waitingTimes.value <= 0) {
      clearInterval(timer.value)
      waitingTimes.value =older
      isActiveSendCode.value = false

    }
  }, 1000)

}


</script>
<style lang='less' scoped>
.btn_code {
  margin-left: 5px;
  height: 39px;
  width: 92px;
}
</style>
